<template>
	<view>
		<!-- <uni-nav-bar left-icon="back" left-text="" right-text="" title='收货地址'></uni-nav-bar> -->
		<view @click.self="towaitpay(item)" v-for="item in datalist" :key='item.id' class="item">
			<view class="left">
				<view class="name">
					<text @click="towaitpay(item)">{{item.name}}</text><text @click="towaitpay(item)" class="default" v-if="item.defaultStatus">默认</text>
				</view>
				<view @click="towaitpay(item)" class="tel">
					{{item.phoneNumber}}
				</view>
			</view>
			<image @click="toeditaddress(item.id)" src="../../../static/images/icons/edit.png" mode=""></image>
		</view>
		<button type="default" @click="toaddaddress">新增收货地址</button>
	</view>
</template>

<script>
	import {
		findAllAddress
	} from "../../../api/my/address/address.js"
	export default {
		data() {
			return {
				datalist: '',
				change: ""
			};
		},
		onShow() {
			findAllAddress({
			}).then(res => {
				console.log(res);
				this.datalist = res.data.items
			})
		},
		onLoad(e) {
			console.log(e);
			if (e.change) {
				this.change = true
			}
		},
		methods: {
			// 到付款页面
			towaitpay(item) {
				if (this.change) {
					console.log(item);
					uni.setStorageSync('address', JSON.stringify(item))
					uni.navigateBack()
				} else {
					return
				}
			},
			// 到新增地址页面
			toaddaddress() {
				uni.navigateTo({
					url: "./addaddress/addaddress"
				})
			},
			//到修改地址页面
			toeditaddress(ids) {
				console.log(ids);
				uni.navigateTo({
					url: `./editaddress/editaddress?id=${ids}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.default {
		background-color: #354e44;
		padding: 6rpx 20rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		color: white;
		margin-left: 40rpx;
		font-size: 20rpx;

	}

	button {
		width: 710rpx;
		background-color: #FFFFFF;
		position: fixed;
		box-sizing: border-box;
		left: 20rpx;
		bottom: 60rpx;
	}

	.item {
		width: 710rpx;
		height: 160rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 20rpx;
		margin: 20rpx auto;

		.switch {
			padding: 20rpx 0;
			margin-top: 10rpx;
			box-sizing: border-box;
		}

		.left {

			.name {
				box-sizing: border-box;
				margin-top: 34rpx;
				font-size: 28rpx;
			}

			.tel {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
				box-sizing: border-box;
			}
		}

		image {
			width: 40rpx;
			height: 40rpx;
			margin: 60rpx;
			box-sizing: border-box;
		}
	}
</style>
